<!-- xml version="1.0" encoding="utf-8" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<?php
if (! $_POST['grp']) {
	header('Location: ../Forms.php');
}
?>
<head>
	<title>The Gallic War</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link href="flashcard.css" rel="stylesheet" type="text/css">
</head>

<?php

try {
	$db = new PDO('sqlite:voc.sqlite3');
	$sentences = array();

	$grp = $_POST['grp'];
	$mkstr = '';
	$q = $db->query("SELECT Form, Type, Num, Marked, Marked FROM lforms WHERE Grp=$grp ORDER BY Num;");
	$sentences = array_merge($sentences, $q->fetchAll(PDO::FETCH_NUM));
	

	//shuffle($sentences);
	
	
	$db = NULL;
} catch (PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
}

?>

<script src="/French/jquery.min.js"></script>
<script type="text/javascript">
<?php
print "var sentences = new Array(".count($sentences)."), group = $grp;\n";
for($i = 0; $i < count($sentences); $i++) {

	$tmp = implode("', '", $sentences[$i]);
	print "sentences[$i] = ['$tmp'];\n";
}
?>

var shown = 0;
var isMain = true;

var nsentences = new Array();

function updateVoc() {
	var w0;
	if (isMain) {
		w0 = "<div id=\"v1\" class=\"La\">" + nsentences[shown][0] + "</div>";
		document.getElementById('main').innerHTML = w0;
	} else {
		w0 = "<div id=\"v1\" class=\"La\">" + nsentences[shown][0] + "</div>";
		w0 += "<div id=\"v2\" class=\"Type\">" + nsentences[shown][1] + "</div>";
		document.getElementById('main').innerHTML = w0;
	}
	$ ( "#total" ).html( "( " + (shown + 1) + " / " + nsentences.length + " )" );
	showmark();
}

function next() {
	shown++;
	isMain = true;
	
	if (shown >= nsentences.length) {
		var diffs = new Array(), k = 0;
		for (var i = 0; i < nsentences.length; i++) {
			if ( nsentences[i][4] != nsentences[i][3] ) {
				diffs.push( new Array( group, nsentences[i][2], nsentences[i][4] ) );
				nsentences[i][3] = nsentences[i][4];
			}
		}
		if (diffs.length) {
			$.ajax({
				type: "POST",
				url: "lfMk.php",
				data: {changes : diffs}
				//success: function() {
				//    alert(diffs.length + ' changed!');
				//}
			}).done(function(data) {
				alert(data);
			});
		} else {
			alert('All done!');
		}
		reorder();
		shown = 0;
	}
	updateVoc();
}

function prev() {
	if (shown > 0) {
		shown--;
		isMain = true;
		updateVoc();
	}
}

function flip() {
	isMain = !isMain;
	updateVoc();
}

function shuffleall() {
	for (var n = 0; n < 100; n++) {
		for (var i = nsentences.length - 1; i > 0; i--) {
	        var j = Math.floor(Math.random() * (i + 1));
	        var temp = nsentences[i];
	        nsentences[i] = nsentences[j];
	        nsentences[j] = temp;
	    }
    }
}

function markit() {
	'1' == nsentences[shown][4] ? nsentences[shown][4] = '0' : nsentences[shown][4] = '1';
	showmark();
}

function showmark() {
	if ( '1' == nsentences[shown][4] )
		$( "#smark" ).html( "★" );
	else
		$( "#smark" ).html( "☆" );
}

function reorder() {
	
	var monly = $( "#markedOnly" );
	nsentences.length = 0;
	
	for ( var i = 0; i < sentences.length; i++ ) {
		if (! monly[0].checked || '1' == sentences[i][4] ) nsentences.push(sentences[i]);
	}
	
	shuffleall();
	shown = 0;
	isMain = true;
	updateVoc();
}
</script>

<body onload="reorder()">

<h1 style="text-align:center"><a href="../Forms.php">The Gallic War</a></h1>



<div class="center">

<div id="main" class="main"></div>

<a href="#" class="button" id="btnprev" onclick="prev()" accesskey="p">&lt;&lt;</a>
<a href="#" class="button" id="btnnext" onclick="next()" accesskey="n">&gt;&gt;</a>
<a href="#" class="button" id="btnflip" onclick="flip();" accesskey="e">flip</a>
<a href="#" class="button" id="btnnew" onclick="location.reload();">new</a>

<a href="#" class="mark" id="smark" onclick="markit();">☆</a>

<span class="total" id="total"></span>

</div>

<div class="options">
<label for="mkonly"><input id="markedOnly" name="markedOnly" type="checkbox" onclick="reorder();"/>Marked Only</label>
</div>

<span id="dummy"></span>
</body>
</html>
